<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/> <!-- 显示中文 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
    }

    th, td {
        padding: 5px;
    }
</style>
<body>
<div class="container-fluid row my-5 justify-content-center">
  <div class="col-6">
    <table class="table " id="demo"></table>
  </div>
  <div class="col-6 card ">
    <p class="card-header">Click on a CD to display album information.</p>
    <p class="card-body" id='showCD'></p>
  </div>
</div>


<script>
    let x, xmlhttp, xmlDoc;
    xmlhttp = new XMLHttpRequest();

    xmlhttp.open("GET", "cd_catalog.xml", true); // ?not
    xmlhttp.onreadystatechange = function () {
        if (this.readyState === 4 && this.status === 200)
            myFunction(this);
    };

    xmlhttp.send();

    function myFunction(xmlhttp) {
        xmlDoc = xmlhttp.responseXML;
        x = xmlDoc.getElementsByTagName("CD");
        let table = "<tr><th>Artist</th><th>Title</th></tr>";
        for (let i = 0; i < x.length; i++) {

            // 为每一行注册点击事件，i为行号
            table += "<tr onclick='displayCD(" + i + ")'><td>";

            table += x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
            table += "</td><td>";
            table += x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
            table += "</td></tr>";
        }
        document.getElementById("demo").innerHTML = table;
    }

    function displayCD(i) {
        // 获取第i行的数据
        // 替换<showCD>的内容
        document.getElementById("showCD").innerHTML =
            "Artist: " +
            x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue +
            "<br>Title: " +
            x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue +
            "<br>Year: " +
            x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue;
    }
</script>

</body>
</html>
